import { Component, OnInit, Input, ViewChild } from '@angular/core'
import {
  DValidateRules,
  FormLayout,
  DFormControlRuleDirective
} from 'ng-devui/form'
import { ToastService } from 'ng-devui'
import { UserAuthService } from 'src/app/@core/user-auth.service'
import { Store } from '@ngrx/store'
import { AppState } from 'src/app/store'
import { Router } from '@angular/router'
import { CookieService } from 'ngx-cookie-service'

@Component({
  selector: 'app-password',
  templateUrl: './password.component.html',
  styleUrls: ['./password.component.scss']
})
export class PasswordComponent implements OnInit {
  @ViewChild('userForm') newCollectionFormDir: DFormControlRuleDirective
  layoutDirection: FormLayout = FormLayout.Vertical
  oldPassword: ''
  newPassword: ''
  confirmPassword: ''
  showOldPassword = false
  showNewPassword = false
  showConfirmPassword = false

  formRules: { [key: string]: DValidateRules } = {
    rule: {
      message: '请检查表单！',
      messageShowType: 'text'
    },
    passwordRules: {
      validators: [
        { required: true, message: '密码不能为空' },
        { minlength: 8 },
        { maxlength: 32 }
      ]
    },

    newPasswordRules: {
      validators: [
        { required: true, message: '密码不能为空' },
        { maxlength: 32 },
        { minlength: 8 },
        {
          pattern:
            /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[~!@#$%^&*()_+{}|":<>?`[\];',.\/])[\da-zA-Z~!@#$%^&*()_+{}|":<>?`[\];',.\/]{8,32}$/
        }
      ],
      message: '密码至少包含大小写字母、数字和特殊字符(~!@#$%^&*()_+{})'
    },

    confirmPasswordRules: {
      validators: [
        { minlength: 8 },
        { maxlength: 32 },
        { required: true, message: '密码不能为空' },
        { sameToPassWord: this.sameToPassWord.bind(this), message: '与新密码不一致' },
        {
          pattern:
            /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[~!@#$%^&*()_+{}|":<>?`[\];',.\/])[\da-zA-Z~!@#$%^&*()_+{}|":<>?`[\];',.\/]{8,32}$/
        }
      ],
      message: '密码至少包含大小写字母、数字和特殊字符(~!@#$%^&*()_+{})'
    }
  }

  sameToPassWord(value) {
    return value === this.newPassword;
  }

  constructor(
    private userAuthService: UserAuthService,
    private router: Router,
    private toastService: ToastService,
    private store: Store<AppState>,
    private cookieService: CookieService
  ) { }

  ngOnInit(): void { }

  submitForm({ valid }) {
    if (valid) {
      this.userAuthService
        .passwordModify(
          this.oldPassword,
          this.newPassword
        )
        .subscribe((res) => {
          this.toastOpen(res.code, res.msg)
        })
    }
  }

  toastOpen(flag: number, msg: string) {
    if (flag === 0) {
      this.toastService.open({
        value: [{ severity: 'success', summary: '', content: msg }]
      })
      this.cookieService.delete('token')
      localStorage.removeItem('token')
      localStorage.removeItem('userName')
      localStorage.removeItem('ROLE')
      localStorage.removeItem('userId')
      localStorage.removeItem('PasswordChange')
      this.userAuthService.userInfo.userName = null
      this.store.dispatch({
        type: 'RESET_TODO',
        payload: {}
      })
      this.router.navigate(['/login/logins'])
    } else {
      this.toastService.open({
        value: [{ severity: 'error', summary: '', content: msg }]
      })
    }
  }
}
